<template>
	<view class="index page">
		<view class="header">
			<view class="header">
				<nav-bar title="积分排行" background="transparent" color="#fff"></nav-bar>
			</view>
			<view class="main">
				<view class="rank-item">
					<view class="poster">
						<image src="@/static/image/second-1.png" mode="widthFix"></image>
						<!-- <view class="avatar">
							<image src="" mode=""></image>
						</view> -->
					</view>
					<view class="name">
						昌新
					</view>
					<view class="integral">
						800积分
					</view>
				</view>
				<view class="rank-item">
					<view class="poster">
						<image src="@/static/image/first-1.png" mode="widthFix"></image>
						<!-- <view class="avatar">
							<image src="" mode=""></image>
						</view> -->
					</view>
					<view class="name">
						昌新
					</view>
					<view class="integral">
						800积分
					</view>
				</view>
				<view class="rank-item">
					<view class="poster">
						<image src="@/static/image/third-1.png" mode="widthFix"></image>
						<!-- <view class="avatar">
							<image src="" mode=""></image>
						</view> -->
					</view>
					<view class="name">
						昌新
					</view>
					<view class="integral">
						800积分
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view class="left">
					<view class="rank">
						排名
					</view>
					<view class="user-id">
						用户ID
					</view>
				</view>
				<view class="right">
					<text class="text">总收入积分(总)</text>
					<uni-icons type="bottom" size="32rpx" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<view class="rank">
						4
					</view>
					<view class="user-id">
						网 * * * 
					</view>
				</view>
				<view class="right">
					6000
				</view>
			</view>
			<view class="list">
				<view class="left">
					<view class="rank">
						10
					</view>
					<view class="user-id">
						网 * * * 
					</view>
				</view>
				<view class="right">
					600
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{}
		},
		onLoad() {
			my.setNavigationBar({
			  frontColor: '#ffffff',
			  backgroundColor: '#ff0000',
			})
		},
	}
</script>

<style lang="scss">
	@import "@/common/style/common.scss";
	.index{
		@include flex-c;
		>.header{
			flex: 0 0 auto;
			background-image: url('@/static/image/rank.jpg');
			background-size: 100%;
			background-repeat: no-repeat;
			height: 666rpx;
			>.main{
				padding: 150rpx 76rpx;
				@include flex-r-between-start;
				.rank-item{
					@include flex-c-center-center;
					font-size: 32rpx;
					color: #fff;
					&:nth-of-type(2){
						.poster{
							width: 270rpx; 
							margin-top: -140rpx;
							// .avatar{
							// 	top: 62rpx;
							// 	@include avatar(142);
							// }
						}
						.name{
							padding: 0 0 15rpx;
						}
					}
					&:last-child{
						.poster{
							margin-top: 20rpx;
						}
					}
					.poster{
						position: relative;
						@include flex-c-center-center;
						width: 164rpx;
						// .avatar{
						// 	position: absolute;
						// 	top: 60rpx;
						// 	@include avatar(140);
						// 	background-color: red;
						// }
					}
					.name{
						line-height: 36rpx;
						padding: 15rpx 0;
					}
				}
			}
		}
		>.main{
			padding: 22rpx 48rpx;
			border-radius: 32rpx;
			margin-top: -64rpx;
			background-color: #fff;
			.top,.list{
				@include flex-r-between-center;
				font-size: 32rpx;
				font-weight: 600;
				.left{
					@include flex-r-start-center;
					.rank{
						width: 80rpx;
						text-align: center;
					}
					.user-id{
						padding-left: 52rpx;
					}
				}
			}
			.top{
				color: #999999;
				line-height: 44rpx;
				padding: 0 0 6rpx;
				.right{
					@include flex-r-start-center;
					.text{
						padding-right: 8rpx;
					}
				}
			}
			.list{
				// padding: 20rpx 0;
				height: 80rpx;
				.left{
					.rank{
						color: #999999;
					}
				}
				.right{
					padding-right: 40rpx;
				}
			}
		}
	}
</style>